{% extends 'studentes/base.html' %}
{% block students_index %}
    {% load static %}

    {#目录#}
    <div class="row">
        {#        菜单栏#}
        <div class="col-md-3">
            <div class="accordion" id="accordionPanelsStayOpenExample">
                <div class="accordion-item">
                    {#          课程名      #}
                    <br>

                    <h4 class="accordion-header text-center" id="flush-headingOne">&emsp;{{ cource.name }} </h4>
                    {% for i in chapter %}
                        <h2 class="accordion-header" id="flush-headingOne">


                            <button class="accordion-button collapsed" type=button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#flush-{{ i.id }}"
                                    {% if section_id.name.id == i.id %}
                                    aria-expanded="true"
                                    {% else %}
                                    aria-expanded="false"
                                    {% endif %}
                                    aria-controls="flush-collapseOne"
                                    aria-current="page">
                                {#             章                   #}
                                {{ i.chapter }}
                            </button>
                        </h2>
                        <div id="flush-{{ i.id }}"
                             class="accordion-collapse collapse {% if section_id.name_id == i.id %} show {% endif %}"
                             aria-labelledby="flush-headingOne"
                             data-bs-parent="#accordionFlushExample">
                            <div class="accordion-body">
                                <ul class="list-group" style="font-size: 10pt">
                                    {% for j in section %}
                                        {% if j.name_id == i.id %}
                                            <a href="{% url 'students_kecheng' id %}?section={{ j.id }}"
                                               class="list-group-item  {% if section_id.id == j.id %} active {% endif %} ">
                                            &emsp;

                                            {#   —————————————————— 节  ————————————#}
                                            {{ j.section }}



                                        {% endif %} </a>


                                    {% endfor %}


                                </ul>
                            </div>
                        </div>
                    {% endfor %}


                </div>
            </div>
        </div>
        {#        菜单栏结尾 #}
        {#     ————————————————————————————   内容   ————————————————————————————#}

        <div class="col-md-9">


            {% if section_id.media.type == 1 %}


                <iframe src="/static/media/{{ section_id.media.media }}" class="col-md-11 "
                        style="height: 620px"></iframe>


                <div class="col-md-12">

                    <br>
                    <h4>&emsp;评论</h4>
                    <hr>


                    {#            ————————————————————————  评论  ————————————————————————    #}
                    <p>
                        <a class="btn btn-primary " data-bs-toggle="collapse" href="#collapseExample"
                           role="button"
                           aria-expanded="false" aria-controls="collapseExample">
                            添加评论
                        </a>
                        <br>
                    </p>
                    <form action="{% url 'cource_section_msg_students' id section_id.name.id section_id.id %}  "
                          method="get">

                        <div class="collapse" id="collapseExample">
                            <div class="card card-body">
                                <div class="row g-3 align-items-center">
                                    <div class="col-auto">
                                        <label for="inputPassword6" class="col-form-label">内容：</label>
                                    </div>

                                    <div class="col">
                                        <input name="msg" type="text" class="form-control"
                                               aria-describedby="passwordHelpInline">
                                    </div>
                                    <div class="col-auto">
                                        <input class="form-control btn-primary" type="submit">
                                    </div>


                                </div>
                            </div>
                        </div>
                    </form>
                    {% for i in message %}

                        <div class="col-md-11" style="background-color: #b4b7d0;margin-top: 2px">
                            <div class="container">
                                <div class="row">
                                    <div class="col-1">
                                        {% load static %}
                                        <img style="border-radius: 50%;margin-top: 5px" width="60px " height="60px"
                                             src="/static/media/{{ i.user.photo }}" alt="">
                                        <p>{{ i.user }}</p>
                                    </div>
                                    <div class="col-11">
                                        <p style="margin-top: 15px">

                                            {{ i.message }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}


                </div>
            {% elif section_id.media.type == 2 %}

                <video controls src="/static/media/{{ section_id.media.media }}" class="col-md-11 ">
                    <source src="http://www.youname.com/images/123456.ogv"/>
                    <source src="http://www.youname.com/images/123456.ogg"/>
                </video>
                <div class="col-md-11">

                <br>
                <h4>&emsp;评论</h4>
                <hr>


                {#            ————————————————————————  评论  ————————————————————————    #}
                <p>
                    <a class="btn btn-primary " data-bs-toggle="collapse" href="#collapseExample"
                       role="button"
                       aria-expanded="false" aria-controls="collapseExample">
                        添加评论
                    </a>
                    <br>
                </p>
                <form action="{% url 'cource_section_msg_students' id section_id.name.id section_id.id %}  "
                      method="get">

                    <div class="collapse" id="collapseExample">
                        <div class="card card-body">
                            <div class="row g-3 align-items-center">
                                <div class="col-auto">
                                    <label for="inputPassword6" class="col-form-label">内容：</label>
                                </div>

                                <div class="col">
                                    <input name="msg" type="text" class="form-control"
                                           aria-describedby="passwordHelpInline">
                                </div>
                                <div class="col-auto">
                                    <input class="form-control btn-primary" type="submit">
                                </div>


                            </div>
                        </div>
                    </div>
                </form>
                {% for i in message %}

                    <div class="col-md-12" style="background-color: #b4b7d0;margin-top: 2px">
                        <div class="container">
                            <div class="row">
                                <div class="col-1">
                                    {% load static %}
                                    <img style="border-radius: 50%;margin-top: 5px" width="60px " height="60px"
                                         src="/static/media/{{ i.user.photo }}" alt="">
                                    <p>{{ i.user }}</p>
                                </div>
                                <div class="col-11">
                                    <p style="margin-top: 15px">

                                        {{ i.message }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% elif section_id.media.type == 3 %}
                {% load static %}
                {% static 'kecheng/如何成为优秀班集体.pptx' %}
                <a href="{% static 'kecheng/如何成为优秀班集体.pptx' %}">下载ppt</a>



                <object type="application/pdf" data='' width="100%" height="620px"> ></object>
                <a href="#" onclick="javascript:window.open('{% static 'kecheng/如何成为优秀班集体.pptx' %}');">在线预览</a>
                var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
                window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(base64Encode(url)));
                <h3>PPT</h3>
            {% endif %}
            {#-----------------------html视频播放-----------------------------#}
            </div>
        </div>
    </div>
    {#    加载课程#}
    {#    {% load static %}#}
    {#    <div class="col-md-9 ">#}
    {#        <h3>课程名：</h3>#}
    {##}
    {##}
    {#-----------------------html预览pdf-----------------------------#}
    {#                        <iframe src="{% static 'kecheng/jianli.pdf' %}" class="col-md-11 h-100"></iframe>#}
    {##}
    {#-----------------------html视频播放-----------------------------#}
    {##}
    {#        <video controls src="{% static 'kecheng/208.mp4' %}" class="col-md-11 ">#}
    {#            <source src="http://www.youname.com/images/123456.ogv"/>#}
    {#            <source src="http://www.youname.com/images/123456.ogg"/>#}
    {#        </video>#}
    {##}
    {#        <div class="col-md-11">#}
    {#            <br>#}
    {#            <h4>&emsp;评论</h4>#}
    {#            <hr>#}
    {#            <p>...</p>#}
    {#            <p>...</p>#}
    {#            <p>...</p>#}
    {#            <p>...</p>#}
    {#        </div>#}
    {#    </div>#}


{% endblock %}

